<!--微信消息推送-->
<template>
  <div class="log">
    <basic-container>
      <avue-crud
          ref="crud"
          :data="tableData"
          :option="tableOption"
          :page.sync="page"
          :table-loading="tableLoading"
          @search-reset="searchReset"
          @on-load="getList"
          @search-change="searchChange"
          @size-change="sizeChange"
          @current-change="currentChange">
        <template slot="pushJson" slot-scope="scope">
          <p v-if="scope.row.pushJson == ''">无</p>
          <p v-if="scope.row.pushJson == null">无</p>
          <p v-else>{{scope.row.pushJson}}</p>
        </template>
        <template slot="msg" slot-scope="scope">
          <p v-if="scope.row.msg == ''">无</p>
          <p v-if="scope.row.msg == null">无</p>
          <p v-else>{{scope.row.msg}}</p>
        </template>
        <template slot="createTime" slot-scope="scope">
          <p v-if="scope.row.createTime == ''">无</p>
          <p v-if="scope.row.createTime == null">无</p>
          <p v-else>{{scope.row.createTime}}</p>
        </template>
        <template slot="status" slot-scope="scope">
          <el-tag v-if="scope.row.status === 0" type="success">{{ scope.label }}</el-tag>
          <el-tag v-if="scope.row.status === 1" type="danger">{{ scope.label }}</el-tag>
        </template>
        <template slot="personName" slot-scope="scope">
         <p>{{scope.row.campusDeptArea}}{{scope.row.deptParentName}}{{scope.row.deptName}}{{scope.row.personName}}</p>
        </template>
        <template slot="menu" slot-scope="scope">
          <el-button
              class="filter-item"
              icon="el-icon-view"
              size="mini"
              type="primary"
              @click="handle(scope.row)">查看
          </el-button>
        </template>
      </avue-crud>
      <!--查看弹窗-->
      <el-dialog
          :visible.sync="dialogEditVisible"
          title="查看"
          width="35%"
          :close-on-click-modal="false"
          @close="dictItemVisible">
        <el-form>
          <el-form-item style="height:60%">
            <p style="margin: 0 0 0 5px"><span style="font-weight: bold;font-size: 16px;color: #303133">发送模板：</span><br/>{{this.pushJson}}</p>
            <p style="margin: 20px 0 0 5px"><span style="font-weight: bold;font-size: 16px;color: #303133">发送结果：</span>{{this.msg}}</p>
          </el-form-item>
          <el-form-item style="text-align: center">
            <el-button
                size="mini"
                type="primary"
                @click="again">重新推送
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>
import {nucwxtstObj,nucwxcxtstObj} from '@/api/nuc/index'
import {mapGetters} from 'vuex'

export default {
  name: "index",
  data() {
    return {
      pushJson:'',
      msg:'',
      dialogEditVisible:false,
      tableData: [],
      searchForm: {},
      currentrow:'',
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      tableLoading: false,
       tableOption : {
        border: true,  //竖线边框
        index: true,  //表格序号
        indexLabel: '序号',  //序号的标题
        stripe: true,  //是否显示表格的斑马条纹
        align: 'center',  //表格列对其方式
        emptyBtnText:'重置', //清空按钮文案
        searchMenuSpan: 6,  //搜索框长度
        editBtn: false,  //编辑按钮
        delBtn: false,  //删除按钮
        menu:true,   //是否显示操作栏
        props: {
          label: 'label',
          value: 'value'
        },
        column: [
          {
            label: '身份',
            prop: 'identityName',
          },
          {
            label: '身份',
            prop: 'identityKey',
            type:'select',
            search: true,
            hide:true,
            dicUrl: '/campus/identity/selectAll?groupNum',
            dicMethod: 'get',
            props: {
              label: 'name',
              value: 'id'
            },
            change: (value) => {
              if(value.value === ''){
                return;
              }
              this.searchForm.identityKey = value.value
              this.getList(this.page, this.searchForm)
            },

          },
          {
            label: '姓名',
            prop: 'personName',
            slot:true,
            search: true,
          },{
            label: '推送模板',
            prop: 'pushJson',
            overHidden: true,
            slot:true,
          },{
            label: '推送信息',
            prop: 'msg',
            slot:true,
          },{
            label: '推送时间',
            prop: 'createTime',
            slot:true,
          },
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['permissions']),
  },
  methods: {
    //展示表格
    getList(page, params) {
      this.tableLoading = true
      nucwxtstObj(Object.assign({
        current: page.currentPage,
        size: page.pageSize,
      }, params, this.searchForm)).then(response => {
        this.tableData = response.data.data.records
        this.page.total = response.data.data.total
        this.tableLoading = false
      })
    },

    //查看方法
    handle: function (row) {
      this.currentrow = row
      this.dialogEditVisible = true
      this.pushJson = row.pushJson
      this.msg = row.msg
    },

    //关闭弹窗
    dictItemVisible: function () {
      this.dialogEditVisible = false
    },

    // 重新推送
    again(){
      let row = this.currentrow
      console.log(this.currentrow)
      this.$confirm('是否确定重新推送?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal:false,  //点击空白处不关弹窗
      }).then(function () {
        console.log(row)
        return nucwxcxtstObj(row.id)
      }).then(() => {
        this.getList(this.page)
        this.$message.success('重新推送成功')
      })
    },

    //搜索页面内容
    searchChange(form, done) {
      this.searchForm = form
      this.page.currentPage = 1
      this.getList(this.page, form)
      done()
    },

    //点击每页多少条会调size-change方法回调
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },

    //点击页码会调用current-change方法回调当前页
    currentChange(current) {
      this.page.currentPage = current
    },

    //清空时重置页面
    searchReset(){
      this.page={};
      this.searchForm = 0;
      this.getList(this.page)
    }
  }
}
</script>
<style scoped>
/deep/.avue-crud__menu{
  display: none;
}
/deep/.el-form-item__label{
  text-align: left;
}
/deep/.avue-form__row{
  padding-left: 2px !important;
  margin-right: 36px;
}
/deep/.avue-form__menu--center{
  text-align: left;
}
/deep/.avue-form__menu--center .el-button{
  margin: 0 20px 0 0;
}
</style>